<!-- @format -->

<template>
	<view class="edit-page-container">
		<view class="head-box">
			<view class="left-box"> </view>
			<view class="right-box" @click="close"
			:data-spmCntSuffix="'.headBox@1.close@'"
			:data-custom="1"
			:data-spm="{'pos': 'close'}">
			</view>
			<view class="edit-text-title">
				{{ editType == "edit" ? "编辑" : "新增" }}出行人
			</view>
		</view>

		<view class="" style="height: 170rpx">
		</view>
		<block>
			<scroll-view scroll-y class="input-box-group">
				<view class="inputBox" v-for="(inputitem, inputindex) in formData" :key="inputindex">
					<!-- 上传图片 -->
					<view class="input-box image" v-if="inputitem.inputType == 55 && inputitem.validateType == 171">
						<view class="label">{{ inputitem.customerInfo }}<text class="required">*</text></view>
						<view class="box-input" @click="changeImg(inputitem, inputindex)"
						:data-spmCntSuffix="'.inputBox@1.changeImg@'"
						:data-custom="1"
						:data-spm="{'pos': 'input'}">
							<image
								mode="heightFix"
								v-if="inputitem.inputValue"
								:src="inputitem.inputValue"
								class="label-img" 
							/>
							<image
								v-else
								:src="inputitem.customerInfoId == 172 ? 'https://cdn1.visiotrip.com/h5AndMini/2024-04-19/idcard-up1.png' : 'https://cdn1.visiotrip.com/h5AndMini/2024-04-19/idcard-up2.png'"
								class="label-img"
							/>
						</view>
					</view>
					<!-- 手动输入 中文校验 -->
					<view class="input-box" v-if="
						(inputitem.validateType == 65 ||
							inputitem.validateType == 63 ||
							inputitem.validateType == 59 ||
							inputitem.validateType == 64 || inputitem.validateType == 171) &&
						inputitem.inputType == 51
					">
						<view class="label">{{ inputitem.customerInfo }}<text class="required">*</text></view>
						<view class="box-input">
							<!-- 预订人 -->
							<input :placeholder="'请输入' + inputitem.customerInfo" v-model="inputitem.inputValue" type="text" />
						</view>
					</view>
					<!-- 手动输入 手机号校验 -->
					<view class="input-box phone-input-box" v-if="inputitem.validateType == 60 && inputitem.inputType == 51">
						<view class="label">{{ inputitem.customerInfo }}<text class="required">*</text></view>
						<view class="box-input">
							<view class="phone-number">
								<view bindtap="selectPhone">
									+
									<text>86</text>
								</view>
							</view>
							<!-- 预订人 -->
							<input :placeholder="'请输入' + inputitem.customerInfo" v-model="inputitem.inputValue" type="number" />
						</view>
					</view>
					<!-- 下拉选择 -->
					<view class="input-box phone-input-box" v-if="inputitem.inputType == 54 && inputitem.customerInfoId != 41">
						<view class="label">{{ inputitem.customerInfo }}<text class="required">*</text></view>
						<view class="box-input">
							<picker style="width: 100%" @change="bindPickerChange($event, inputitem, inputindex)" :value="carIndex"
								:range="inputitem.papersArr">
								<view class="uni-input">{{
									inputitem.valueType ? inputitem.valueType : "请选择"
								}}</view>
							</picker>
						</view>
					</view>
					<!-- 下拉选择 证件类型 -->
					<view class="input-box phone-input-box" v-if="inputitem.inputType == 54 && inputitem.customerInfoId == 41">
						<view class="label">{{ inputitem.customerInfo }}<text class="required">*</text></view>
						<view class="box-input">
							<picker style="width: 100%" @change="bindPickerChange2($event, inputitem, inputindex)" range-key="name"
								:value="carIndex" :range="inputitem.papersArr">
								<view class="uni-input">{{
									inputitem.inputValue ? inputitem.inputValue : "请选择"
								}}</view>
							</picker>
						</view>
					</view>

					<!-- 单选性别 -->
					<view class="input-box phone-input-box" v-if="inputitem.inputType == 52">
						<view class="label">{{ inputitem.customerInfo }}<text class="required">*</text></view>
						<view class="box-input">
							<radio-group @change="radioChange($event, inputitem, inputindex)">
								<label class="radio" v-for="(sexitem, sexindex) in sexArr" :key="sexindex">
									<radio :value="sexitem.name" :checked="sexitem.name === inputitem.inputValue" />
									{{ sexitem.name }}
								</label>
							</radio-group>
						</view>
					</view>
					<!-- 手动输入 正整数|数字|双精度 -->
					<view class="input-box phone-input-box" v-if="
						(inputitem.validateType == 62 ||
							inputitem.validateType == 61 ||
							inputitem.validateType == 66) &&
						inputitem.inputType == 51
					">
						<view class="label">{{ inputitem.customerInfo }}<text class="required">*</text></view>
						<view class="box-input"><input :placeholder="'请输入' + inputitem.customerInfo" v-model="inputitem.inputValue"
								type="number" /></view>
					</view>

					<!-- 日期选择 -->
					<view class="input-box phone-input-box" v-if="inputitem.inputType == 56 || inputitem.inputType == 58">
						<view class="label">{{ inputitem.customerInfo }}<text class="required">*</text></view>
						<view class="box-input">
							<picker mode="date" :value="inputitem.inputValue" :start="startDate" :end="endDate"
								@change="bindDateChange($event, inputitem, inputindex)">
								<view class="uni-input">{{
									inputitem.inputValue ? inputitem.inputValue : "请选择"
								}}</view>
							</picker>
						</view>
					</view>

					<!-- 时间选择 -->
					<view class="input-box phone-input-box" v-if="inputitem.inputType == 57">
						<view class="label">{{ inputitem.customerInfo }}<text class="required">*</text></view>
						<view class="box-input">
							<picker mode="time" :value="inputitem.inputValue" start="00:00" end="24:00"
								@change="bindTimeChange($event, inputitem, inputindex)">
								<view class="uni-input">{{
									inputitem.inputValue ? inputitem.inputValue : "请选择"
								}}</view>
							</picker>
						</view>
					</view>
				</view>
			</scroll-view>
		</block>
		<view class="save" @click="handlerSave"
		:data-spmCntSuffix="'.saveView@1.handlerSave@'"
		:data-custom="1"
		:data-spm="{'pos': '保存'}">保存</view>
	</view>
</template>
<script>
import request from "../../utils/request/request.js"
import { readySubmit } from "../../utils/common.js"
import getRequestUrl from '../../utils/request/getRequestUrl.js';
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		})
		return {
			carIndex: 0,
			formData: [],
			date: "2009-08-06",
			sexArr: [
				{
					name: "男",
					id: 0
				},
				{
					name: "女",
					id: 1
				}
			]
		}
	},
	computed: {
		startDate() {
			return this.getDate("start")
		},
		endDate() {
			return this.getDate("end")
		}
	},
	props: {
		contact: Object,
		//输入框边框
		inputBorder: {
			type: Boolean,
			default: false
		},
		papersArr: {
			type: Array,
			default: []
		},
		contactsList: Array,
		editType: {
			//
			type: String,
			default: "add"
		},
		selectedItem: {
			type: Array,
			default: []
		}
	},
	methods: {
		close() {
			this.$emit("close")
		},
		show(data) {
			this.formData = JSON.parse(JSON.stringify(data))
			this.$forceUpdate()
			this.$nextTick(() => {
				this.date = "2018-08-08"
			})
		},
		isShowContact(index, contact) { },
		handlerSave() {
			let that = this
			readySubmit(this.formData, () => {
				let params = {
					// 联系人基本信息
					contactsItemList: []
				}
				let _arr = this.formData.map((item) => {
					return {
						templateInfoCode: item.customerInfoId,
						templateInfoValue: item.inputValue
					}
				})
				params.contactsItemList = _arr
				let url = "/app/my/contacts/create"
				if (that.editType == "edit") {
					params.contactId = this.formData[0].contactId
					let contact = {}
					that.contactsList.forEach((element) => {
						if (element.contactId == params.contactId) {
							contact = element
						}
					})
					contact.contactsCertificate.forEach((certificate) => {
						certificate.contactsItemList.forEach((element) => {
							that.formData.map((_t) => {
								if (_t.customerInfoId == element.templateId) {
									element.templateInfoValue = _t.inputValue
								}
							})
						})
					})
					contact.contactsItemList = that.formData.map((v) => {
						const { customerInfoId, inputValue } = v
						return {
							templateInfoValue: inputValue,
							templateInfoCode: customerInfoId
						}
					})
					url = "/app/my/contacts/modify"
					params = contact
				}
				request({
					url,
					method: "POST",
					params
				}).then((res) => {
					if (res.success) {
						this.$emit("success", res.data)
						this.$emit("close")
					}
				})
				this.$forceUpdate()
			})
		},
		// 选择或者取消联系人
		handleSelectContact(contact) {
			this.$emit("selectedCallback", contact)
			this.$forceUpdate()
		},
		handlerDelete(contact, contactId) {
			this.$nextTick(() => {
				let contactId = contact[0].contactId
				let contactItem = this.contactsList.filter(
					(item) => item.contactId == contactId
				)
				this.handleSelectContact(contactItem[0])
			})
		},
		handleSelectMore(contact, index) {
			this.$emit("more", index)
		},
		// 选择设为常用出行人
		handleSelectChange(item, index) {
			item = item.map((i) => {
				i.checked = !i.checked
				return i
			})
			this.$emit("selectContacts", { index, item })
			this.$forceUpdate()
		},
		submit() {
			let checkData = []
			let newFormData = this.formData
			//拼接表单用于遍历
			newFormData.map((item) => {
				checkData = checkData.concat(item)
			})
			this.$emit("changeFormData", checkData)
		},
		getDate(type) {
			const date = new Date()
			let year = date.getFullYear()
			let month = date.getMonth() + 1
			let day = date.getDate()

			if (type === "start") {
				year = year - 60
			} else if (type === "end") {
				year = year + 30
			}
			month = month > 9 ? month : "0" + month
			day = day > 9 ? day : "0" + day
			return `${year}-${month}-${day}`
		},
		bindPickerChange2(e, item, index1, index2) {
			//证件类型单独处理
			this.carIndex = e.detail.value
			item.valueType = item.papersArr[e.detail.value].validateTypeId
			item.inputValue = item.papersArr[e.detail.value].name
			this.$store.commit(
				"SET_PAPERSTYPE",
				item.papersArr[e.detail.value].validateTypeId
			)
		},
		radioChange(evt, item, index) {
			item.inputValue = evt.detail.value
			this.$set(this.formData, index, item)
		},
		bindPickerChange: function (e, item, index) {
			this.carIndex = e.detail.value
			item.valueType = item.papersArr[e.detail.value]
			item.inputValue = item.papersArr[e.detail.value]
			this.$set(this.formData, index, item)
		},
		bindDateChange: function (e, item, index) {
			this.selectDate = e.detail.value
			item.valueType = e.detail.value
			item.inputValue = e.detail.value
			this.$set(this.formData, index, item)
		},
		bindTimeChange: function (e, item, index) {
			this.selectTime = e.detail.value
			item.valueType = e.detail.value
			item.inputValue = e.detail.value
			this.$set(this.formData, index, item)
		},
		//选择图片
		changeImg(inputitem, inputindex) {
		let that = this
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['compressed'],
			sourceType: ['album'],
			success: res => {
			uni.showLoading({
				title: '图片上传中'
			});
			this.uploadImage(res.tempFilePaths, inputitem, inputindex)
			}
		});
		},
		//上传图片
		uploadImage(tempFilePaths, item, inputindex) {
		let _this = this;
		uni.uploadFile({
			url: `${getRequestUrl.requestUrl}/file/upload`, //接口地址
			header: {
			"Authentication": uni.getStorageSync('Authentication'),
			"storeId": 77 // yuanbin 20250502 阿坝小程序固定id
			}, //请求token
			filePath: tempFilePaths[0],
			name: 'file',
			success: (res) => {
			if (res.statusCode == '200') {
				item.inputValue = JSON.parse(res.data).data
				this.$forceUpdate()
			}
			uni.hideLoading();
			}
		});
		},
	}
}
</script>
<style
	lang="scss"
	scoped>
	.edit-page-container {
		position: relative;
		width: 100%;
		height: 705rpx;
		padding: 0 48rpx 0 48rpx;
		// padding: 0 48rpx calc(48rpx + env(safe-area-inset-bottom)) 48rpx;
		background: #ffffff;

		opacity: 1;
	}

	.edit-page-container .head-box {
		position: absolute;
		top: -32rpx;
		left: 0;
		width: 750rpx;
		height: 170rpx;
		background: #ffffff;
		border-radius: 4rpx 4rpx 0px 0px;
	}

	.edit-page-container .head-box .left-box {
		margin: 50rpx 0 16rpx 48rpx;
		width: 112rpx;
		height: 72rpx;
		background: url("https://cdn1.visiotrip.com/h5AndMini/icon-input@td2x.png") 0 0 no-repeat;
		background-size: 100%;
	}

	.edit-page-container .head-box .right-box {
		position: absolute;
		right: 38rpx;
		top: 40rpx;
		width: 68rpx;
		height: 68rpx;

		background: url("https://cdn1.visiotrip.com/h5AndMini/icon-more@td2x.png") 0 0 no-repeat;
		background-size: 100%;
	}

	.edit-page-container .edit-text-title {
		height: 56rpx;
		margin-left: 48rpx;
		font-size: 40rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #1a1a1a;
	}

	.edit-page-container .box-input {
		flex: 1;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	
    .label-img {
      width: 400rpx;
      height: 230rpx;
      margin-top: 20rpx;
    }

	.edit-page-container .input-box-group {
		max-height: 390rpx;
		/* overflow: scroll; */
	}

	.edit-page-container .input-box-group .inputBox:first-child .input-box .box-input-text {
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #1a1a1a;
	}

	.edit-page-container .input-box-group .inputBox:first-child .input-box .label-text {
		display: none;
	}

	.visitor-box .icon-delete {
		width: 34rpx;
		height: 34rpx;
		margin: 20rpx 20rpx 0 0;
	}

	.inputBox {}

	.inputBox .input-box {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 26rpx;
		color: #646566;
		padding: 20rpx 0;
		width: 100%;
		border-bottom: 1px solid #e9e9e9;
		&.image {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
	}

	.input-box-group .inputBox:last-child .input-box {
		border-bottom: none;
	}

	.inputBox .input-box .label {
		flex-shrink: 1;
		text-align: right;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #1a1a1a;
		//text-align-last: justify;
	}

	.edit-page-container .required {
		display: inline-block;
		position: relative;
		display: inline-block;
		top: 5rpx;
		color: red;
		margin: 0rpx 30rpx 0 8rpx;
	}

	.inputBox .input-box input {
		flex: 1;
	}

	.inputBox .input-box .phone-number {
		display: flex;
		align-items: center;
		color: #000;
		margin-right: 6rpx;
	}

	.inputBox .input-box .phone-number .more:before {
		content: "\e606";
		font-size: 12rpx;
		margin-left: 5rpx;
	}

	.edit-page-container .save {
		position: absolute;
		left: 48rpx;
		bottom: 48rpx;
		// #ifdef H5
		bottom: calc(48rpx + constant(safe-area-inset-bottom));
		bottom: calc(48rpx + env(safe-area-inset-bottom));
		// #endif
		width: 654rpx;
		height: 88rpx;
		background: $sl-color-btn-background;
		border-radius: 44rpx;
		opacity: 1;
		font-size: 32rpx;
		font-family: PingFangSC-Regular-, PingFangSC-Regular;
		font-weight: normal;
		color: #ffffff;
		line-height: 88rpx;
		text-align: center;
	}
</style>
